<template>
    <div class="app-container">
        <el-row type="flex" justify="space-around" :gutter="20">
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="title">物联网卡总量（张）</div>
                    <div>
                        <div class="total" style="color: rgb(146 75 206)">
                            {{ numberToCurrency(wuCard.totalcount) }}
                        </div>
                        <div class="bind">
                            已绑定{{ numberToCurrency(wuCard.bind) }}张
                        </div>
                    </div>
                    <span class="info">
                        <!-- <el-tooltip class="item" :content="warnInfo" placement="top-start">
              <i class="el-icon-warning"></i>
            </el-tooltip> -->
                    </span>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="title">设备总量（个）</div>
                    <div>
                        <div class="total" style="color: #11cb8d">
                            {{ numberToCurrency(device.totalcount) }}
                        </div>
                        <div class="bind">
                            已绑定{{ numberToCurrency(device.bind) }}个
                        </div>
                    </div>
                    <span class="info">
                        <!-- <el-tooltip class="item" :content="warnInfo" placement="top-start">
              <i class="el-icon-warning"></i>
            </el-tooltip> -->
                    </span>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="title">昨日告警（个）</div>
                    <div>
                        <div class="total" style="color: #ffaf70">
                            {{ numberToCurrency(warnYestday) }}
                        </div>
                    </div>
                    <span class="info">
                        <!-- <el-tooltip class="item" :content="warnInfo" placement="top-start">
              <i class="el-icon-warning"></i>
            </el-tooltip> -->
                    </span>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover">
                    <div class="title">累计告警（个）</div>
                    <div>
                        <div class="total" style="color: rgb(255 128 112)">
                            {{ numberToCurrency(warnTotle) }}
                        </div>
                    </div>
                    <span class="info">
                        <!-- <el-tooltip class="item" :content="warnInfo" placement="top-start">
              <i class="el-icon-warning"></i>
            </el-tooltip> -->
                    </span>
                </el-card>
            </el-col>
        </el-row>
        <div class="chartWrapper" style="position: relative">
            <div id="wuCardChart" style="height: 300px; background: #fff"></div>
            <span class="info">
                <el-tooltip
                    class="item"
                    :content="warnInfo"
                    placement="top-start"
                >
                    <i class="el-icon-warning"></i>
                </el-tooltip>
            </span>
        </div>
        <div style="position: relative">
            <div
                id="deviceChart"
                style="height: 300px; background: #fff; margin-top: 20px"
            ></div>
            <span class="info">
                <el-tooltip
                    class="item"
                    :content="warnInfo"
                    placement="top-start"
                >
                    <i class="el-icon-warning"></i>
                </el-tooltip>
            </span>
        </div>
    </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
import { getDay } from '@/utils/index'

export default {
    data() {
        return {
            warnInfo: '统计数据截至昨日24时!',
            wuCard: {
                totalcount: 0,
                bind: 0
            },
            device: {
                totalcount: 0,
                bind: 0
            },
            warnYestday: 0,
            warnTotle: 0,
            chartData: {
                // 物联卡数量统计数据
                xdt: [],
                ydt: []
            },
            chartData2: {
                // 设备数量统计数据
                xdt: [],
                ydt: []
            }
        }
    },
    mounted() {
        //初始化柱状图

        this.drawChart()
        this.drawChart2()

        //获取柱状图
        this.initChart()
        // 物联卡总量
        this.getWlkTotle()

        // 获取设备总量
        this.getDevTotle()
        // 获取告警总量
        this.getWarnNum()
        // 获取物联网卡总量图
        this.getWlkChart()
    },
    methods: {
        alartInfo() {
            this.$message('统计数据截至昨日24时!')
        },

        // 物联卡总量
        getWlkTotle() {
            // this.$get('/api/tt/card/integratedInfo/cardTotal', {}, false)
            //     .then((data) => {
            //         this.wuCard.totalcount = data.total || 0
            //         this.wuCard.bind = data.totalDevice || 0
            //     })
            //     .catch((err) => {
            //         this.$message.error(err)
            //     })
        },
        // 获取设备总量
        getDevTotle() {
            // this.$post('/api/information/total/equipment/yesterday')
            //     .then((data) => {
            //         this.device.totalcount = data.total || 0
            //         this.device.bind = data.bindingTotal || 0
            //     })
            //     .catch((err) => {
            //         this.$message.error(err)
            //     })
        },
        // 获取告警总量
        getWarnNum() {
            // this.$post('/api/information/total/alertLog')
            //     .then((data) => {
            //         this.warnYestday = data.yestdayTotal || 0
            //         this.warnTotle = data.total || 0
            //     })
            //     .catch((err) => {
            //         this.$message.error(err)
            //     })
        },

        // 获取物联网卡总量图
        getWlkChart() {
            const parmas = {
                startDate: getDay(-365),
                endDate: getDay(0)
            }
            // this.$post('/api/sim/statistics/developmentTypeMonth', parmas).then(
            //     (data) => {
            //         let dt = data.data || []
            //         if (dt.length) {
            //             dt = dt.reverse()
            //             this.chartData.xdt = dt.map((item) => item.billcycle)
            //             this.chartData.ydt = dt.map((item) => item.allSum)
            //         } else {
            //             this.chartData.xdt = []
            //             this.chartData.ydt = []
            //         }
            //         this.drawChart()
            //     }
            // )
        },
        // 获取设备总量
        initChart() {
            const parmas = {
                startDate: getDay(-365),
                endDate: getDay(0)
            }
            // this.$post('/api/device/statistics/developmentMonth', parmas).then(
            //     (data) => {
            //         let dt = data.data || []
            //         if (dt.length) {
            //             dt = dt.reverse()
            //             this.chartData2.xdt = dt.map((item) => item.data)
            //             this.chartData2.ydt = dt.map((item) => item.sum)
            //         } else {
            //             this.chartData2.xdt = []
            //             this.chartData2.ydt = []
            //         }
            //         this.drawChart2()
            //     }
            // )
        },
        numberToCurrency(value) {
            if (!value) return 0
            // 获取整数部分
            const intPart = Math.trunc(value)
            // 整数部分处理，增加,
            const intPartFormat = intPart
                .toString()
                .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            // 预定义小数部分
            let floatPart = ''
            // 将数值截取为小数部分和整数部分
            const valueArray = value.toString().split('.')
            if (valueArray.length === 2) {
                // 有小数部分
                floatPart = valueArray[1].toString() // 取得小数部分
                return intPartFormat + '.' + floatPart
            }
            return intPartFormat + floatPart
        },
        drawChart() {
            let myChart = echarts.init(document.getElementById('wuCardChart'))
            let option = {
                title: {
                    text: '物联网卡数量统计',
                    padding: 30,
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 400,
                        color: '#4F626C'
                    },
                    subtext: '卡数量/张',
                    subtextStyle: {
                        color: '#98A8B9'
                    }
                },
                grid: {
                    top: '30%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#aaa'
                        }
                    },
                    // data: this.chartData.xdt
                    data: [
                        '2021/07',
                        '2021/08',
                        '2021/09',
                        '2021/10',
                        '2021/11',
                        '2021/12',
                        '2022/01',
                        '2022/02',
                        '2022/03',
                        '2022/04',
                        '2022/05',
                        '2022/06'
                    ]
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#aaa'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(204,204,204, .7)',
                            type: 'dotted'
                        }
                    }
                },
                series: [
                    {
                        name: '卡数量',
                        // data: this.chartData.ydt,
                        data: [
                            120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80,
                            70
                        ],
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        { offset: 0, color: '#77DDFF' },
                                        // { offset: 0.5, color: '#00BBFF' },
                                        { offset: 1, color: '#007aff' }
                                    ]
                                )
                            }
                        },
                        barWidth: '20px'
                    }
                ]
            }
            myChart.setOption(option)
        },
        drawChart2() {
            let myChart = echarts.init(document.getElementById('deviceChart'))
            let option = {
                title: {
                    text: '设备数量统计',
                    padding: 30,
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 400,
                        color: '#4F626C'
                    },
                    subtext: '设备总数/个',
                    subtextStyle: {
                        color: '#98A8B9'
                    }
                },
                grid: {
                    top: '30%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#aaa'
                        }
                    },
                    // data: this.chartData2.xdt
                    data: [
                        '2021/07',
                        '2021/08',
                        '2021/09',
                        '2021/10',
                        '2021/11',
                        '2021/12',
                        '2022/01',
                        '2022/02',
                        '2022/03',
                        '2022/04',
                        '2022/05',
                        '2022/06'
                    ]
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#aaa'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(204,204,204, .7)',
                            type: 'dotted'
                        }
                    }
                },
                series: [
                    {
                        name: '设备总数',
                        data: [12, 12, 15, 15, 16, 17, 19, 19, 20, 25, 28, 30],
                        // data: this.chartData2.ydt,
                        type: 'bar',
                        // itemStyle: {
                        //   color: '#11cb8d'
                        // },
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        { offset: 0, color: '#77DDFF' },
                                        { offset: 1, color: '#11cb8d' }
                                    ]
                                )
                            }
                        },
                        barWidth: '20px'
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .el-card .el-card__body {
    padding: 10px;
    height: 80px;
    font-size: 12px;
    text-align: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.total {
    font-size: 20px;
    margin: 3px;
    font-weight: 700;
}
.big {
    font-size: 20px;
    font-weight: 400;
}
.bind {
    color: #8598ac;
}
.info {
    color: #f39111;
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>